<template>
    <div class="box" style="overflow:auto">
        <header class="header">
            <ul>
                <li>
                    <!-- <p class="iconfont icon-arrow-right"></p> -->
                    <router-link to="home" tag="p" class="iconfont icon-arrow-right"></router-link>
                </li>
                <li><div class="white iconfont icon-fangdajing" @click="$router.push('/search')"></div></li>
                <li><p class="iconfont icon-gengduo"></p></li>
            </ul>
        </header>
        <div class="content" style="overflow:auto">
            <div class="left">
                <van-sidebar v-model="activeKey" >
                    <van-sidebar-item 
                        :title="item" 
                        v-for="(item, index) in categoryList" 
                        :key="index"
                        @click="click(index)"/>
                </van-sidebar>
            </div>
            <div class="right">
                <div class="below">
                    <!-- <p>
                        <span>热门分类</span>
                        <span>排行榜</span>
                    </p> -->

                    <ul>
                          <li v-for="(item, index) in brand" :key="index">
                              <van-image 
                                  width="100"
                                  height="100"
                                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                  fit = "cover"
                                  @click="click1(item.brand)"
                              >
                              <template #default>
                                  <span>{{item.brand}}</span>
                              </template>
                              
                              </van-image>
                          </li>
                    </ul>
    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Col, Row, Sidebar, SidebarItem } from 'vant';
import { categoryBrandList, categoryList } from '../../api/pro'
import { Image as VanImage } from 'vant';


Vue.use(Col);
Vue.use(Row);
Vue.use(VanImage);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      brand: [],  // 右边渲染已分类产品
      categoryList:[],  // 左边渲染产品分类
      activeKey:0,
    }
  },
  methods: {
      //  点击分类下的品牌跳转
      click1 (brand) {
        console.log(brand);
        this.$router.push({name:'searchResult', params:{ keyword: brand}})
      },

      //  单击分类列表，切换不同导航
      click (index) {
        //   console.log(index);
          this.categoryList.forEach((itm,ind)=>{
              if(index === ind){
                  // 通过索引值的比较，获取到我当前点击的分类名
                //   console.log(itm);
                  categoryBrandList({category:itm}).then(res => {
                      console.log(res.data.data);
                      this.brand = res.data.data
                  })
              }
          })
      }
  },
  mounted () {
    // 分类列表的渲染
    categoryList ().then(res => {
        // 赋值给 categoryList 数组 渲染
        this.categoryList = res.data.data
        // console.log(this.categoryList);
        // 打开分类，索引值默认为0 选中第一个
        this.activeKey = 0
        // 渲染该分类的产品
        categoryBrandList({ category:this.categoryList[0] }).then(res => {
            console.log(res.data.data);
            this.brand = res.data.data
        })
    })
  }
};
</script>

<style scoped lang="stylus">
header
  height 0.44rem
  border-bottom 1px solid #f4f2f2
  background white
  ul
    display flex
    justify-content space-between
    align-items center
    height 0.44rem
    background white
    li
      display flex
      align-items center
      .white
          width 245px
          height 34px
          background #f4f2f2
          border-radius 20px
          &:before
            position relative
            top 10px
            left 15px
      p
        display flex
        justify-content center
        width 40px
        color gray
.content
  display flex
  .left
    text-align center
    width 85px
    overflow auto
  .right
    overflow auto
    flex 1
    .on
      height 50px
      // background pink
    .below
      p
        // background pink
        display flex
        justify-content space-between
        margin 10px 0
        span
          font-size 14px
      ul 
        box-sizing border-box
        padding 15px
        li
          float left
          font-size 12px
          margin-top 10px
          margin-right 20px
          span
            display block
            text-align center
            width 100px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap




        // flex-wrap wrap
        // justify-content space-between
        // box-sizing border-box
        // padding 5px
        // li
        //   display flex
        //   width 90px
        //   text-align center
        //   font-size 12px







        

</style>